<template>
  <div class="app-container" >
    <el-card v-loading="formLoading">
      <div style="font-weight: bold">
        {{ detailInfo.enterpriseName }}
        <el-tag v-if="detailInfo.smallStatus" type="success">小微企业</el-tag>
      </div>
      <div class="msg-box" >
        <div class="msg-item">
          <div>纳税识别号：</div>
          <div> {{ detailInfo.creditCode ? detailInfo.creditCode : '-' }}</div>
        </div>
        <div class="msg-item">
          <div>法定代表人：</div>
          <div>{{ detailInfo.legalPerson? detailInfo.legalPerson : '-' }}</div>
        </div>
        <div class="msg-item">
          <div>注册资本：</div>
          <div>{{ detailInfo.registeredCapital ? detailInfo.registeredCapital : '-' }}</div>
        </div>
        <div class="msg-item">
          <div>成立日期：</div>
          <div>{{ detailInfo.registerDate ? detailInfo.registerDate : '-' }}</div>
        </div>
        <div class="msg-item">
          <div>企业类型：</div>
          <div>{{ detailInfo.loginRegisterType ? detailInfo.loginRegisterType: '-' }}</div>
        </div>
        <div class="msg-item">
          <div>注册地址：</div>
          <div>{{ detailInfo.registerAddress ? detailInfo.registerAddress : '-' }}</div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px;">
      <div class="gd-item">
        <div>股东</div>
        <div class="scroll-container">
          <div class="scroll-content">
            <div
              class="scroll-item"
              v-for="(item, idx) in detailInfo.enterprisePartners"
              :key="item + idx"
            >
              <div class="top-box">
                <div
                  class="xing"
                  :style="{ backgroundColor: tagColor[idx % 3] }"
                >
                  {{ item.stockName[0] }}
                </div>
                <div class="name">{{ item.stockName }}</div>
              </div>
              <div class="bottom-box">
                <div>持股比例： {{ item.stockPercent }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gd-item">
        <div>人员</div>
        <div class="scroll-container">
          <div class="scroll-content">
            <div
              class="scroll-item"
              v-for="(item, idx) in detailInfo.employeeEmployees"
              :key="item + idx"
            >
              <div class="top-box">
                <div
                  class="xing"
                  :style="{ backgroundColor: tagColor[idx % 3] }"
                >
                  {{ item.name[0] }}
                </div>
                <div class="name">{{ item.name }}</div>
              </div>
              <div class="bottom-box">
                <div>职位： {{ item.job }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div style="text-align: center">
      <div
        class="tab-box"
        style="display: flex; border: 1px solid #d7d7d7; justify-content: space-between"
      >
        <div
          style="cursor: pointer;width: 33.33%; text-align: center;"
          :style="{ backgroundColor: activeName == index ? '#fff' : '#d7d7d7' }"
          v-for="(item, index) in tabList"
          :key="index"
          @click="activeName = index"
        >
          {{ item }}
        </div>
      </div>
      <keep-alive>
        <basic-info :basicInfo="detailInfo" v-if="activeName == '0'" />
      </keep-alive>
      <keep-alive>
        <gs-info :basicInfo="detailInfo" v-if="activeName == 1" />
      </keep-alive>
      <keep-alive>
        <gssfInfo :detailInfo="detailInfo" v-if="activeName == 2" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { getBusinessCirclesDetail } from "@/api/report";
import basicInfo from "./components/basicInfo.vue";
import gsInfo from "./components/gsInfo.vue";
import gssfInfo from "./components/gssfInfo.vue";
export default {
  components: {
    basicInfo,
    gsInfo,
    gssfInfo
  },
  data() {
    return {
      formLoading: false,
      tagColor: ["#FECA3F", "#7F9DF8", "#FB7272"],
      detailInfo: {},
      id: "",
      activeName: 0,
      tabList: ["基本信息", "股东信息", "法律诉讼"]
    };
  },
  created() {
    this.getDetail(this.$route.query.id);
  },
  methods: {
    getDetail(v) {
      this.formLoading = true;
      getBusinessCirclesDetail({ reportId: v })
        .then(res => {
          this.detailInfo = res.data;
          this.formLoading = false;
        })
        .finally(() => {
          this.formLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.msg-box {
  margin-top: 20px;
  .msg-item {
    display: flex;
    margin-bottom: 10px;
    > div {
      &:nth-child(1) {
        font-weight: bold;
        font-size: 14px;
      }
      &:nth-child(2) {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

.gd-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  height: 160px;
  > div {
    &:nth-child(1) {
      padding: 10px 5px;
      width: 20px;
      height: 160px;
      //line-height: 300px;
      writing-mode: tb-rl;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      background-color: #d7d7d7;
    }
    &:nth-child(2) {
      width: 100%;
      height: 160px;
      > div {
        margin-left: 10px;
      }
    }
  }
}

.tab-box {
  margin-top: 20px;
  height: 40px;
  line-height: 40px;

  margin-bottom: 20px;
  > div {
    // background-color: #;
  }
}
.active {
  background-color: #fff;
}

.scroll-container {
  overflow-x: auto; /* 开启横向滚动条 */
  overflow-y: hidden;
  white-space: nowrap; /* 确保内容不换行 */
}

.scroll-content {
  display: inline-block; /* 使内容横向排列 */
}

.scroll-item {
  display: inline-block;
  margin-right: 10px; /* 项之间的间隔 */
  width: 160px;
  height: 160px;
  display: inline-block;
  margin-bottom: 10px;
  padding: 30px 10px;
  background-color: #d7d7d7;
  .top-box {
    display: flex;
    align-items: center;
    .xing {
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      border-radius: 5px;
    }
    .name {
      width: calc(100% - 55px);
      font-size: 14px;
      margin-left: 10px;
      white-space: wrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .bottom-box {
    margin-top: 15px;
    font-size: 14px;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
</style>
